<template>
  <search-input
    :search-types="searchTypes"
    :recent-search-items="recentSearchItem"
    :popular-search-items="popularSearchItem"
    @search-click="handleSearch"
    @remove-recent-search-items="removeRecentItems"
    @handle-search-type-change="searchTypeChange"
  />
</template>

<script setup>
import {defineComponent} from "vue";
import SearchInput from '../common/SearchInput.vue';

defineComponent({
  name: 'PublicSearch'
})

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  searchTypes: {
    type: Array,
    default:()=>[
      {label:'search.type.product_type',value: 'search.type.product_type',key: 'search.type.product_type'},
      {label: 'search.type.factory_type',value: 'search.type.factory_type',key: 'search.type.factory_type'}
    ]
  },
  recentSearchItem: {
    type: Array,
    default: ()=>[],
  },
  popularSearchItem: {
    type: Array,
    default: ()=>[],
  }
})

const emits = defineEmits(['handleSearch','removeRecentSearchItems','handleSearchTypeChange']);

const handleSearch = (item)=>{
  emits('handleSearch',item);
}

const removeRecentItems = ()=>{
  emits('removeRecentSearchItems',{});
}

const searchTypeChange = (value)=>{
  emits('handleSearchTypeChange',value);
}
</script>

<style scoped lang="scss">

</style>